<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"> 
<title>文档标题</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<style>
body{
	margin:0;
	padding:0;
}
.Masks{
	position:fixed;
	background-color:#000;
	width:100%;
	height:100%;
	top:0;
	left:0;
	opacity:0.7;
	z-index:99998;
}
.Popups{
	position:fixed;
	min-width:320px;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	z-index:99999;
}
.Popup{
	background-color:#fff;
	min-width:320px;
	width:320px;
	padding:0px 0px 10px 0px;
	text-align:center;
	overflow:hidden;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	border-radius:5px;
}
.Popup img{
	width:100%;
}
.Popup p{
	color:#373737;
	font-family:"Microsoft YaHei";
	font-size:18px;
	margin:0px;
}
.close{
	position: relative;
	top:20px;
	margin:0 auto;
	width:40px;
	height:40px;
	border-radius:40px;
	border:2px solid #fff;
	z-index:99997;
}
.close::before,.close::after{
	position: absolute;
	content:'';
	top:50%;
	left:3px;
	margin-top:-1px;
	background-color:#fff;
	width:34px;
	height:2px;
}
.close::before{
	transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg); 	
}
.close::after{
	transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg); 	
}
</style>
</head>
<body>
	<div id="Mask" style="display:block;">
	<div class="Masks"></div>
	<div class="Popups">
		<div class="Popup">
			<img src="http://oap59rfi2.bkt.clouddn.com/QQ%E6%88%AA%E5%9B%BE20160812110840.png" />
			<p>文本文本文本</p><p>文本文本文本文本文本文本</p><p>文本文本文本文本文本文本文本文本</p>
			<p style="margin:12px;">文本文本文本</p>
		</div>
		<div class="close"></div>
	</div>
	</div>
	
	
	
	
	
	
	
  <p>CSS3为用户添加了三个特殊效果的处理方式：过渡、动画、变化。当用户和界面元素交互时，使用这些特殊样式可大大改善用户的体验效果。这些效果直接由浏览器引擎处理，可以节省开销。尽管如此，它们也会耗费大量的处理能力，尤其是一些复杂的WEB页面上。即使是最基本的效果，也是如此。本篇的目的只是熟悉下这三种CSS处理效果，不推荐在实际系统中大篇幅使用。</p>
  <p>温馨提示：请谨慎大篇幅使用这些特殊效果。</p>
  <p>另外一方面，由于在CCS3标准化之前，主流浏览器都是通过添加厂商前缀方式提供样式支持。所以要解决浏览器兼容问题，使用这些样式，我们不得不为每一个样式添加各个产商前缀，例如添加一个过度延迟属性transition-delay，不得不这样写：</p>
  <p>效果比较简单，包括以下几点：<br>窗口透明度发生变化,从最初的0渐变到1。 <br>窗口位置从浏览器底部渐变到浏览器居中位置。<br>窗口有一个90度的翻转效果。<br>窗口有遮挡层，弹窗时，遮挡层透明度从0渐变到0.7。<br>窗口关闭时所有动画反向执行。</p>
  <p>直接设置left和top为50%可让元素左上角原点在浏览器居中，但是我们要以窗口的中心位置作为原点，使用CSS变换特效(transform)的平移translate函数可达到目的。这里补充下变换效果有哪些函数：</p>
  <p>translate(x, y)（长度值或者百分比）：在水平方向、垂直方向平移元素。</p>
  <p>translateX(value)：水平方向平移。</p>

<script>
	$('.close').click(function(){
		$('#Mask').hide(300);
	})
</script>

</body>
</html>